<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div class="vc-news-list-wrapper">
      <div class="vc-news-list-header"></div>
      <div class="vc-news-list-body">
        <div
          class="vc-news-list fit-box full-height"
          :style="visual.parseStyle(compStyle)"
        >
          <el-table
            ref="dataTable"
            v-bind="tableOptions"
            :data="dataList"
            class="fit-table vc-news-list-table"
          >
            <el-table-column
              v-for="(column, index) in columnList"
              :key="index"
              v-bind="column.options"
            >
              <template #default="{ row }">
                <div
                  v-if="column.fieldType === '日期'"
                  :style="column.style"
                  @click="() => cellClick(column.prop, row)"
                >
                  {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
                </div>
                <div
                  v-else-if="column.fieldType === '数字'"
                  :style="column.style"
                  @click="() => cellClick(column.prop, row)"
                >
                  {{tool.formatNumber(row[column.prop], column.point)}}
                </div>
                <div
                  v-else
                  :style="column.style"
                  @click="() => cellClick(column.prop, row)"
                >{{row[column.prop]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <div
    v-else
    v-loading="true"
    element-loading-text=""
    style="min-height: 30px;"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  ></div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import date from "@/utils/date";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object
});
const initializing = ref(true);
const currNode = ref(props.node);
const compStyle = ref({});
const dataList = ref([]);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);
const tableOptions = ref({});
const columnList = ref([]);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  dataList.value = (await visual.loadData(currNode.value.compData, eventHandler, getData()) || {}).data || [];
  initTableOptions();
  initColumnList();
  await nextTick(() => initializing.value = false);
};

const initTableOptions = () => {
  const options = {};
  options.width = compStyle.value['width'] || '100%';
  options.height = compStyle.value['height'] || '100%';
  options.border = compStyle.value['border'] || false;
  options.stripe = compStyle.value['stripe'] || false;
  tableOptions.value = options;
};

const initColumnList = () => {
  const list = [];
  (compStyle.value.columnList || []).forEach(item => {
    const column = {};
    column.label = item.label;
    column.prop = item.prop;
    column.fieldType = item.fieldType;
    column.point = item.point;
    column.format = item.format;

    const options = {};
    if (item.autoWidth) {
      options.minWidth = item.width || 10;
    } else {
      options.width = item.width || 10;
    }
    options.label = item.label;
    options.headerAlign = item.headerAlign;
    options.align = item.align;
    column.options = options;

    column.style = visual.parseFontStyle(item);
    list.push(column);
  });
  columnList.value = list;
};

const cellClick = (prop, row) => {
  eventHandler.trigger('点击行内容事件', {"col": prop, "row": row});
};

const getData = () => {
  return { inputParam: currNode.value.inputParam || {} };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = () => {
  init();
};

onMounted(() => {
  refresh();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-news-list-wrapper {
  display: flex;
  flex-direction: column;
  height: 1px;
  flex-grow: 1;
  .vc-news-list-body {
    height: 1px;
    flex-grow: 1;
    .vc-news-list {
      display: flex;
      flex-direction: row;
      .vc-news-list-table {
        --el-table-index: unset!important;
        :deep(.el-table__inner-wrapper):before {
          background-color: unset!important;
        }
      }
    }
  }
}
</style>